<template>
    <el-container>
        <el-header style="height:80px;">
            <el-form ref="processForm" label-width="80px" style="margin-top:20px;">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="事项名称：">
                            <el-input v-model="search.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="填表人：" prop="cUsername">
                            <el-input v-model="search.departmentName"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item>
                            <el-button class="querybtn" type="primary" @click="findProcess(search.name)" style="color: #606266;background-color: #fff;border-color: #dcdfe6;margin-left:10px;">查询</el-button>
                            <!-- <el-button type="primary" @click="handleExport">导出</el-button> -->
                            <el-button type="warning" @click="setprocessForm">设置表格</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-header>
        <el-main style="height:800px;">
            <section class="contant_head">
                <span>图表
                    <!-- <sub>Form</sub> -->
                </span>
            </section>
            <el-table :data="processList" border stripe style="text-align:center;" :header-cell-style="getRowClass" @cell-click="showProcess" @selection-change="handleSelectionChange" tooltip-effect="dark" id="out-table">
                <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
                <el-table-column type="index" label="编号" width="90" align="center"> </el-table-column>
                <el-table-column prop="talbeName" label="表格名称" align="center"></el-table-column>
                <el-table-column prop="setTime" :formatter="formateDate" label="设置时间" align="center"></el-table-column>
                <el-table-column prop="sonTableCount" label="填写总数" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-delete" @click="deleteRow(scope.$index,scope.row)" style="cursor:pointer;margin-left: 16px" title="移除"></i>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10]" :page-size="limit" layout="total, sizes, prev, pager, next" :total="total" style="float:right">
                </el-pagination>
            </div>
        </el-main>
        <el-dialog title="设置表格" :visible.sync="dialogprocessVisible">
            <el-form ref="form" :model="processForm" class="demo-ruleForm" label-position="left" label-width="100px" style="margin-left:20px;">
                <el-row class="firstform">
                    <el-form-item label="表格名称：" prop="talbeName" :rules="{required: true, message:'请输入表格名称',trigger:'blur'}">
                        <el-input v-model="processForm.talbeName" placeholder="请输入表格名称" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label=" "
                        prop="fiveItems"
                        :rules="{required:true,message:'请添加内容',trigger:'blur'}"
                    >
                        <el-select v-model="newlyValue" placeholder="新增检查内容">
                            <el-option v-for="item in addOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.value===2&&hasImage" title="图片只能添加一项">
                            </el-option>
                        </el-select>
                        <el-button type="primary" @click="addNewValue" :disabled="!newlyValue||(newlyValue===2&&hasImage)">新增</el-button>
                    </el-form-item>
                </el-row>
                <el-row v-for="(item,index) in newlyValueConfig" :key="index" class="newly-add" style="margin-bottom: 16px">
                    <el-col style="width: 100px ; height: 44px;">

                    </el-col>
                    <el-col :span="10">
                        <el-form-item label-width="0" v-if="item.type===1" :prop="'fiveItems.'+index+'.name'" :rules="{required: true, message:'请输入文本内容',trigger:'blur'}">
                            <el-input v-model="newlyValueConfig[index].name" placeholder="文本框"></el-input>
                        </el-form-item>
                        <div v-if="item.type===2" class="image-border-wrap">
                            <i class="el-icon-plus"></i>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <i class="el-icon-delete" @click="deleteCurrent(index)" style="cursor:pointer;margin-left: 16px" title="移除"></i>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="dialogprocessVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveprocessData('form')">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="查看表格" :visible.sync="dialogViewVisible">
            <el-form ref="form" :model="viewForm" id="nodisable" label-position="left" label-width="100px" style="margin-left:20px;">
                <el-row class="firstform">
                    <el-form-item label="表格名称：">
                        <el-input v-model="viewForm.talbeName" placeholder="请输入表格名称" disabled="" />
                    </el-form-item>
                </el-row>
                <el-row v-for="(item,index) in viewForm.fiveItems" :key="index" class="newly-add" style="margin-bottom: 16px">
                    <el-col style="width: 100px ; height: 44px;">
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label-width="0" v-if="item.type===1">
                            <el-input v-model="item.name" placeholder="文本框" disabled=""></el-input>
                        </el-form-item>
                        <div v-if="item.type===2" class="image-border-wrap">
                            <i class="el-icon-plus"></i>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="dialogViewVisible = false">关闭</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="viewImage">
            <img :src="server+'/'+currentImage" alt="" width="100%">
        </el-dialog>
        <el-dialog title="填写详情" :visible.sync="dialogDetailVisible">
            <table class="detail-table">
                <tbody>
                    <tr>
                        <th>填写人</th>
                        <td>{{processDetail.userName}}</td>
                    </tr>
                    <tr>
                        <th>填写时间</th>
                        <td>{{parseDate(processDetail.writeTime)}}</td>
                    </tr>
                    <tr v-for="(item,index) in processDetail.items" :key="index">
                        <th>{{item.name}}</th>
                        <td v-if="item.type===1">{{item.value}}</td>
                        <td v-if="item.type===2">
                            <template v-if="item.value">
                                <img @click="zoomImage(img)" v-for="(img,idx) in item.value.split(',')" :src="server+'/'+img" alt="" :key="idx" width="100px" height="100px" style="margin: 10px">
                            </template>
                            <div v-else style="opacity: 0.6">(未上传图片)</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </el-dialog>
        <el-dialog title="流程管控" :visible.sync="dialogContentVisible">
            <!-- <el-form label-width="100px" ref="selfDetailForm" :model="searchPart">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="表名称：">
                            <el-input v-model="searchPart.threeTableName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名：">
                            <el-input v-model="searchPart.selfMan"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="检查日期：">
                            <el-date-picker v-model="searchPart.startDate" type="daterange" style="max-width: 100%" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label-width="20px">
                            <el-button @click="viewSelfDetail(searchPart,1,10)">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form> -->
            <el-main>
                <el-table :data="detailList" border stripe style="text-align:center;" :header-cell-style="getRowClass" @selection-change="handleSelectionChange" tooltip-effect="dark" id="out-table">
                    <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
                    <el-table-column type="index" label="编号" width="90" align="center"> </el-table-column>
                    <el-table-column prop="procedureName" label="名称" align="center"></el-table-column>
                    <el-table-column prop="userName" label="填写人" align="center"></el-table-column>
                    <el-table-column prop="writeTime" label="填写时间" :formatter="formateDate" align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button class="edit-btn" @click="viewThreeDetail(scope.row.detailsId)">
                                <i></i>查看详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleSelfCurrentChange" :current-page="listCurrent" :page-sizes="[10]" :page-size="limit" layout="total, sizes, prev, pager, next" :total="listTotal" style="float:right">
                    </el-pagination>
                </div>
            </el-main>
        </el-dialog>
    </el-container>

</template>

<script>
import { api } from "@/fetch/api";
import { exportExcel } from '@/utils/validate'

import server from '@/config.js'

export default {
    name: "process",
    data() {
        return {
            search: {
                name: ''
            },
            currentImage: '',
            viewImage: false,
            server: server.apiServer,
            dialogViewVisible: false,
            viewForm: {},
            searchPart: {},
            processList: [],
            hasImage: false,
            addOptions: [
                {
                    value: 1,
                    label: '文本框'
                },
                {
                    value: 2,
                    label: '图片添加'
                }
            ],
            newlyValue: '',
            newlyValueConfig: [],
            total: 0,
            processForm: {
                estate: 0,
                fiveDetails: {
                    cause: 0,
                    detailsId: 0,
                    itemId: "",
                    items: [
                        {
                            fiveItem: 0,
                            imgs: [],
                            name: "",
                            procedureId: 0,
                            type: 0,
                            value: ""
                        }
                    ],
                    procedureId: 0,
                    procedureName: '',
                    userName: "",
                    writeMan: 0,
                    writeTime: ""
                },
                fiveItems: [],
                procedureId: 0,
                setTime: "",
                sonTableCount: 0,
                talbeName: ""
            },
            departmentName: '',
            tableData: [
                {
                    index: 0,
                    checkName: '交警一队',
                    status: '状态',
                    selfRole: "A",
                    checkRole: "B"
                }
            ],
            sendObject: [],
            selection: [],
            limit: 10,
            currentPage: 1,
            dialogprocessVisible: false,
            dialogContentVisible: false,
            dialogDetailVisible: false,
            listPagesize: 10,
            listCurrent: 1,
            detailList: [],
            listTotal: 0,
            processDetail: {},
            processTable: {}
        }
    },
    methods: {
        handleSelectionChange(selection) {
            this.selection = selection;
        },
        zoomImage(img) {
            this.currentImage = img
            this.viewImage = true
        },
        handleSelfCurrentChange(val) {
            this.listCurrent = val
        },
        getPermission() {
            api
                .PermissionPage({}, { limit: 0, pageIndex: 0 })
                .then(response => {
                    if (response.status === 100) {
                        this.permissions = response.result.list;
                        api.LocalStorageService.update("permissions", response.result.list);
                    } else {
                    }
                })
                .catch(error => { });
        },
        handleSizeChange(size) {
            this.limit = size
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.findProcess(this.search.name, this.limit, this.currentPage)
        },
        showProcess(row, col, cell, event) {
            console.log(row)
            if (col.property === 'talbeName') {
                this.findStructure(row.procedureId)
            }
            if (col.property === 'sonTableCount') {
                this.findProcessList(row.procedureId, '')
                this.dialogContentVisible = true
            }
        },
        formateDate(row, col, value, index) {
            const date = new Date(value).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
            return date
        },
        handleExport() {
            const data = []
            this.selection.forEach(item => {
                const temp = {}
                temp.count = item.sonTableCount
                temp.name = item.talbeName
                temp.time = this.parseDate(item.setTime)
                data.push(temp)
            })
            api.exportData('/exportExcel/exportFiveExcel', data).then(response => {
                const date = new Date(Date.now()).toLocaleDateString()
                exportExcel(response.data, '流程管控' + date)
            })
        },
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return "background:rgba(242,242,242,1)";
            } else {
                return "";
            }
        },
        addNewValue() {
            const item = {
                fiveItem: 0,
                imgs: [],
                name: "",
                procedureId: 0,
                type: this.newlyValue,
                value: ""
            }

            if (this.newlyValue === 2) {
                this.hasImage = true
            }
            if (this.hasImage && this.newlyValue === 1) {
                this.newlyValueConfig.splice(this.newlyValueConfig.length - 1, 0, item)
                this.processForm.fiveItems.splice(this.processForm.fiveItems.length - 1, 0, item)
            } else {
                this.newlyValueConfig.push(item)
                this.processForm.fiveItems.push(item)
            }
        },
        deleteCurrent(index) {
            if (this.newlyValueConfig[index].type === 2) {
                this.hasImage = false
            }
            const temp = this.newlyValueConfig.filter((value, idx) => index !== idx)
            this.newlyValueConfig = [...temp]
            this.processForm.fiveItems = [...temp]
        },
        setprocessForm() {
            this.processForm = {
                estate: 0,
                fiveDetails: {
                    cause: 0,
                    detailsId: 0,
                    itemId: "",
                    items: [
                        {
                            fiveItem: 0,
                            imgs: [],
                            name: "",
                            procedureId: 0,
                            type: 0,
                            value: ""
                        }
                    ],
                    procedureId: 0,
                    procedureName: '',
                    userName: "",
                    writeMan: 0,
                    writeTime: ""
                },
                fiveItems: [],
                procedureId: 0,
                setTime: "",
                sonTableCount: 0,
                talbeName: ""
            }
            this.clearConfig()
            this.hasImage = false
            this.dialogprocessVisible = true
        },
        saveprocessData(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    const values = { ...this.processForm }
                    // values.fiveItems = this.newlyValueConfig
                    api.addProcess(values).then(response => {
                        if (response.status === 100) {
                            this.$message('设置成功')
                            this.dialogprocessVisible = false
                            this.findProcess('')
                        }
                    })
                }
            })
        },
        viewThreeDetail(id) {
            api.findProcessDetail(id).then(response => {
                if (response.status === 100) {
                    this.processDetail = response.result
                    this.dialogDetailVisible = true
                }
            })
        },
        parseDate(timestamp) {
            const date = new Date(timestamp).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
            return date
        },
        deleteRow(index, row) {
            this.$confirm("是否继续删除", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                api.delProcess(row.procedureId).then(() => {
                    this.findProcess('')
                })
            })
        },
        findProcess(name) {
            api.findProcess(name, this.limit, this.currentPage).then(response => {
                this.processList = response.result.inspectorList
                this.total = response.result.totalCount
            })
        },
        findStructure(id) {
            api.findProcessStructure(id).then(response => {
                if (response.status === 100) {
                    this.viewForm = response.result
                    this.dialogViewVisible = true
                }
            })
        },
        clearConfig() {
            this.newlyValueConfig = []
        },
        findProcessList(id, username) {
            api.findProcessList(id, this.listPagesize, this.listCurrent, username).then(response => {
                this.detailList = response.result.inspectorList
                this.listTotal = response.result.total
            })
        }
        // handleCurrentChange(val) {
        //     this.currentPage = val;
        //     this.findProcess('', 10, this.currentPage);
        // },
    },
    mounted() {
        //修改-2018-2-6
        this.getPermission();
        this.findProcess('')
    }
};
</script>

<style lang="less" scoped>
@import url('../../assets/css/index.css');
.el-header {
  width: 98%;
  background: #fff;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  .el-input,
  .el-select,
  .el-date-picker {
    width: 100%;
  }
}
.el-main {
  width: 98%;
  background: #fff;
  margin: 0 auto;
  padding: 0px;
  .contant_head {
    border-left: 3px solid #f7585d;
    background: #f9f9f9;
    height: 40px;
    span {
      line-height: 40px;
      font-size: 20px;
      padding-left: 10px;
      sub {
        font-size: 12px;
      }
    }
  }
}
</style>
<style>
.cell {
  text-align: center;
}

.newly-add {
  min-height: 53px;
  line-height: 53px;
}

#nodisable .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}

#nodisable .el-radio__label {
  color: #606266;
}

.image-border-wrap {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border: 1px dashed #d9d9d9;
  text-align: center;
  justify-content: center;
  align-items: center;
}
</style>
<style lang="stylus" module="$">
.role_setting_panel {
    :global {
        .el-form-item {
            display: block;
        }
    }
}

.role_warpper {
    :global {
        .el-dialog__header {
            background: rgba(242, 242, 242, 1);
            padding-bottom: 16px;
        }

        .el-dialog__title {
            font-weight: bold;
        }

        .el-form-item__label {
            float: none;
            display: inline-block;
            min-width: 120px;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background-color: #F7585D;
            border-color: #F7585D;
        }

        .el-checkbox__input.is-checked+.el-checkbox__label {
            color: #F7585D;
        }

        .el-button--primary {
            color: #fff;
            background-color: #F7585D;
            border-color: #F7585D;
        }
    }
}
</style>
<style lang="scss" scoped>
.detail-table {
  border-collapse: collapse;
  width: 100%;
  th {
    width: 30%;
    border: 1px solid #927171;
    padding: 10px 16px;
    color: #000;
    background-color: #f2f2f2;
  }
  td {
    width: 70%;
    border: 1px solid #927171;
    padding: 10px 16px;
  }
}
</style>
